<template>
  <div class="mine">
    <ke-header />
    <div class="content">
      <div class="tab">
        <ke-mine-tab />
      </div>
      <div class="tab-detail">
        <router-view />
      </div>
    </div>
    <div class="footer">
      <ke-footer />
    </div>
  </div>
</template>

<script>
export default {
  name: 'mine',
  components: {
    keHeader: () => import('../components/ke-header'),
    keMineTab: () => import('../components/ke-mine-tab'),
    keFooter: () => import('../components/ke-footer')
  }
}
</script>

<style lang="stylus" scoped>
.mine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f4f4f4;

  .content {
    display: flex;
    flex-direction: row;
    width: 1200px;
    margin: 10px auto 0px;
    box-sizing: border-box;

    .tab-detail {
      box-sizing: border-box;
      margin: 16px 0 0 120px;
      background: #ffffff;
      padding: 20px;
      height: 500px;
      width: 800px;
    }
  }

  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
</style>
